<template>
	<view>
		<swiper style="height: 100vh;" :current="current">
			<swiper-item>
				<view style="padding: 50rpx;background-color: #dfdac7;height: 100vh;">
					<view :style="{height: statusBarHeight+'px'}"></view>
					<view style="height: 93vh;border-radius: 1em; border: 1rpx #d1c7ad solid;box-shadow: 0 0 1rpx 3rpx #d1c7ad;
					background-color: #dfdac7;overflow: hidden;">
						<view style="text-align: center;color: #6c5c40;">
							<image :src="$url+bookIntroduce.imageUrl" mode="aspectFill"
							style="width: 250rpx;height: 360rpx;margin: 80rpx 0 30rpx 0;"></image>
							<view style="color: #000000;font-size: 40rpx;" class="u-line-2">{{bookIntroduce.name}}</view>
							<view style="margin: 20rpx 0;">
								<text>{{author.authorName}}</text>
								<text style="margin: 0 10rpx;"></text>
								<text style="background-color: #d1c7b8;padding: 5rpx 15rpx;border-radius: 2em;"
								v-if="guanz == 0" @click="followAuthorClick">+关注</text>
							</view>
						</view>
						<view style="background-color: #dfdac7;color:#9b9480;margin: 20rpx 0 30rpx 0;">
							<view class="u-flex" style="justify-content: space-around;">
								<view style="text-align: center;">
									<view class="u-flex">
										<h3 style="color: #3d3109;">{{bookIntroduce.score}}</h3>
										<text style="margin-left: 5rpx;">分</text>
									</view>
									<view>评分</view>
								</view>
								<view style="text-align: center;">
									<view class="u-flex">
										<h3 style="color: #3d3109;">{{bookIntroduce.heat}}</h3>
										<text style="margin-left: 5rpx;">
											<image src="../../../static/redu.png" mode="aspectFill"
											style="width: 30rpx;height: 30rpx;"></image>
										</text>
									</view>
									<view>热度/万</view>
								</view>
							</view>
						</view>
						<view style="padding: 0 50rpx;color: #6e5f4b;">
							<view class="u-flex">
								<h3 style="color:  #3d3109;">简介</h3>
								<text style="margin: 10rpx;padding: 10rpx 20rpx;border-radius: 0.5em; background-color: #d1c7b8;">西红柿原创</text>
								<text style="margin: 10rpx;padding: 10rpx 20rpx;border-radius: 0.5em; background-color: #d1c7b8;">{{bookIntroduce.types}}</text>
							</view>
							<view>
								<text class="u-line-3">{{bookIntroduce.metaDescription}}</text>
							</view>
							<view style="margin: 50rpx 0;">
								<view class="u-flex"style="justify-content: space-between;">
									<h3 style="color:  #3d3109;">热门书评</h3>
									<view style="color: #5f759b;" @click="moreClick">更多书评</view>
								</view>
								<view v-for="(item,index) in comments" :key="index">
									<comment :item="item"></comment>
								</view>
								<view style="text-align: center;margin-top: 50rpx;" v-if="comments.length == 0">暂无评论点击更多书评进行评论，成为本书首评吧！</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item v-for="(item,index) in chapterList":key="index" style="background-color: #dfdac7;">
				<view :style="{height: statusBarHeight+'px'}"></view>
				<view style="position: relative;">
					<view style="position: absolute;right: 0;top: 0;margin-right: 80rpx;margin-top: -15rpx;">
						<image src="../../../static/addShuq.png" mode="aspectFill"
						style="width: 20rpx;height: 100rpx;" v-if="bookIntroduce.bookmark == ++index"></image>
					</view>
					<view style="position: absolute;right: 0;top: 0;">
						<image src="../../../static/gengduo.png" mode="aspectFill"
						style="width: 50rpx;height: 50rpx;" @click="topRightClick(index)"></image>
					</view>
					<view style="padding: 20rpx;">
						<view style="margin: 20rpx 0;color: #6e5f4b;width: 60%;" @click="leftClick"
						class="u-line-1">
							<u-icon name="arrow-left"size="30"></u-icon>
							<text>{{item.chapterName}}</text>
						</view>
						<view>
							<scroll-view scroll-y>
								<view style="height: 90vh;">
									<h2 style="text-align: center;margin: 20rpx 0;">{{item.chapterName}}</h2>
									<view style="letter-spacing: 5rpx;
									line-height: 60rpx;text-indent: 2em;">{{item.chapterContent}}</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>

			</swiper-item>
		</swiper>
		<u-popup v-model="show" mode="bottom"border-radius="20">
			<view style="height: 100%;width: 100%;background-color: #F1F1F1;padding: 50rpx;justify-content: space-evenly;"class="u-flex">
				<view @click="shujClick">
					<view style="padding: 30rpx;background-color: #FFFFFF;border-radius: 50%;text-align: center;">
						<image src="../../../static/icon_bookItem/shuji.png" mode="aspectFill"
						style="width: 50rpx;height: 50rpx;"></image>
					</view>
					<view style="margin: 10rpx;">书籍详情</view>
				</view>
				<view  @click="bookmarkClick">
					<view style="padding: 30rpx;background-color: #FFFFFF;border-radius: 50%;text-align: center;">
						<image src="../../../static/icon_bookItem/add.png" mode="aspectFill"
						style="width: 50rpx;height: 50rpx;"></image>
					</view>
					<view style="margin: 10rpx;">添加书签</view>
				</view>
				<view  @click="bookmarkClick2">
					<view style="padding: 30rpx;background-color: #FFFFFF;border-radius: 50%;text-align: center;">
						<image src="../../../static/icon_bookItem/add.png" mode="aspectFill"
						style="width: 50rpx;height: 50rpx;"></image>
					</view>
					<view style="margin: 10rpx;">删除书签</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:0,
				itemId:0,
				chapterList:[],
				bookIntroduce:{},
				show:false,
				current:0,
				indexs:0,
				comments:[],
				author:{},
				followAuthor:{},
				guanz:0
			}
		},
		mounted() {
			let that = this
			//获取手机系统信息
			const info = uni.getSystemInfoSync()
			//设置状态栏高度
			that.statusBarHeight = info.statusBarHeight
			
		},
		methods: {
			topRightClick(e){
				this.show = true
				this.indexs = e
				console.log(this.indexs)
			},
			async getBookItem(id){
				const res=await this.$myRequst({
					url:"/chapter/gets/"+id
				})
				this.chapterList=res.data.data
				console.log(this.chapterList)
			},
			leftClick(){
				uni.navigateBack({
					
				})
			},
			async bookmarkClick(){
				console.log(this.indexs)
				if(this.indexs == 0){
					return
				}
				this.bookIntroduce.bookmark = this.indexs
				console.log(this.bookIntroduce)
				const res=await this.$myRequst({
					url:"/bookData/put",
					method:"PUT",
					data:this.bookIntroduce
				})
				console.log(res.data)
			},
			async bookmarkClick2(){
				this.bookIntroduce.bookmark = 0
				const res=await this.$myRequst({
					url:"/bookData/put",
					method:"PUT",
					data:this.bookIntroduce
				})
				console.log(res.data)
			},
			async getbookIntroduce(id){
				const res=await this.$myRequst({
					url:"/bookData/get/"+id
				})
				this.bookIntroduce = res.data.data
				console.log(this.bookIntroduce)
			},
			shujClick(){
				uni.navigateTo({
					url:"../bookDetails/bookDetails?id="+this.itemId
				})
			},
			saveHistroy(){//bookIntroduce id
				console.log(this.bookIntroduce)
				let bookItemArr = uni.getStorageSync("bookItemArr") || []
				let item ={
					id:this.bookIntroduce.id,
					imageUrl:this.bookIntroduce.imageUrl,
					name:this.bookIntroduce.name,
					state:this.bookIntroduce.state,
					types:this.bookIntroduce.types,
					score:this.bookIntroduce.score,
					looktime:Date.now()
				}
				let index = bookItemArr.findIndex(i=>{ //判断是否重复，没有就返回-1
					return i.id == this.bookIntroduce.id
				})
				console.log(index)
				if(index >=0){
					bookItemArr.splice(index,1)//删除
				}
				bookItemArr.unshift(item)//向前追加对象
				// bookItemArr = bookItemArr.slice(0,20)
				
				uni.setStorageSync("bookItemArr",bookItemArr)
			},
			//this.itemId  
			async getComments(){
				const res=await this.$myRequst({
					url:"/comment/gets/"+this.itemId
				})
				console.log(res.data.data)
				this.comments = res.data.data.sort((a,b)=>b.likes - a.likes).slice(0,2)
			},
			moreClick(){
				uni.navigateTo({
					url:"../comments/comments?id="+this.itemId
				})
			},
			async getAuthor(id){
				const res=await this.$myRequst({
					url:'/author/get/'+id
				})
				this.author = res.data.data
				console.log(this.author)
			},
			async getFollowAuthor(){//关注表
				const res=await this.$myRequst({
					url:"/follow/gets/author/"+uni.getStorageSync("userId")
				})
				console.log(res.data.data)
				this.followAuthor = res.data.data.find(item => this.author.id == item.authorIds)
				console.log(this.followAuthor)
				if(this.followAuthor != undefined){
					this.guanz = 1
				}else{
					this.guanz = 0
				}
			},
			followAuthorClick(){
				this.follow().then(res=>{
					this.getAuthorPut().then(res=>{
						uni.showToast({
							title:"已关注",
							icon:"none",
							position:"top"
						})
						this.guanz = 1
					})
				})
			},
			async follow(){
				///follow/post
				const res=await this.$myRequst({
					url:"/follow/post",
					method:"POST",
					data:{
						authorIds:this.author.id,
						userId:uni.getStorageSync("userId")
					}
				})
			},
			async getAuthorPut(){
				let i = 0
				i = ++this.author.pour
				console.log("111")
				const res=await this.$myRequst({
					url:"/author/put",
					method:"PUT",
					data:{
						id:this.author.id,
						pour:i
					}
				})
				
			},
		},
		onLoad(opstion) {
			this.itemId = opstion.id
			this.getBookItem(this.itemId)
			this.getbookIntroduce(this.itemId).then((res)=>{
				if(opstion.current != undefined){
					this.current = opstion.current
				}else if(this.bookIntroduce.bookmark != 0){
					this.current = this.bookIntroduce.bookmark
				}
			}).then((res)=>{
				this.saveHistroy()
				let authorId = this.bookIntroduce.authorId
				this.getAuthor(authorId).then((res)=>{
					this.getFollowAuthor()
				})
			})
			
		},
		onShow() {
			this.getComments()
			this.getFollowAuthor()
		}
	}
</script>

<style>

</style>
